<template>
    <div class="his-tom">
        <div class="pop-bg"></div>
        <div class="pop-wrap">
            <!--今天发布-->
            <div class="pop-con">
                <div class="pop-con-detail">
                    <h3>销单</h3>
                    <div class="red">输送单{{detail.sn}}：{{detail.startbed}} 号床　 输送类型：{{detail.catalogname}} </div>
                    <div class="textarea-box">
                        <textarea v-model="des" @focus="showTxt=false" @blur="showTxt=true"></textarea>
                        <div class="textarea-txt" v-if="showTxt && !des" @click="handleHide"><span class="inline-block">填写处理备注</span></div>
                    </div>
                </div>
                <div class="handle-btn">
                    <button class="btn close-btn" @click="cancel">取消</button>
                    <button class="btn ok-btn" @click="sureHandle">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        props:{
            detail:''
        },
        data(){
            return{
                des:'',
                showTxt:false
            }
        },
        created(){

        },
        mounted(){
            this.handleHide()
        },
        methods:{
            handleHide(){
                jQuery('.textarea-box textarea').focus()
            },
            cancel(){
                this.$emit('colse');
            },
            sureHandle(){
                if(jQuery.trim(this.des) == ''){
                    this.$Message({type:'error',message:'请填写销单理由！'});
                    return
                }
                this.$emit('sure',jQuery.trim(this.des));
                this.cancel();
            }
        }
    }
</script>
<style scoped>
    .his-tom .pop-wrap {
        width: 500px;
        top:50%;
        margin-left: -250px;
        margin-top: -170px;
    }
    .his-tom .pop-wrap .pop-con {
        border-radius: 6px;
        padding: 10px 10px 0;
    }
    .his-tom .pop-con-detail div {
        text-align: center;
        line-height: 34px;
        font-size: 16px;
    }
    .his-tom .pop-con-detail h3 {
        text-align: center;
        line-height: 34px;
        font-size: 20px;
        color: #686868;
    }
    .textarea-box {
        position: relative;
        padding: 10px;
    }
    .textarea-box textarea {
        width: 100%;
        height: 200px;
        padding: 6px;
        resize: none;
        border-color: #a9a9a9;
        border-radius: 3px;
        font-size: 18px;
        color: #38947c;
    }
    .textarea-box .textarea-txt {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        width: 100%;
        text-align: center;
    }
    .textarea-box .textarea-txt .inline-block {
        display: inline-block;
        vertical-align: middle;
        color: #888;
        font-size: 20px;
    }
    .textarea-box .textarea-txt:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0;
    }
</style>
